<template>
   <div>查询栏</div>
   <div></div>
   <div>工具栏</div>
   <div><buttonToolBar :data="widgetList" @selected="selected"></buttonToolBar></div>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import draggable from "vuedraggable"
  import {nanoid} from 'nanoid'
  import {Plus} from '@element-plus/icons-vue';
  import buttonToolBar from '@/designer/pc/container/buttonToolBar'


  const state = reactive({
    widgetList: [
    
    ]
  });
  const {
    widgetList
  }  = toRefs(state);

  function addField(){
    let fieldId= nanoid();
    console.log(fieldId);
    parentData.data.push(
      {fieldId: fieldId, type: 'button',  name:'新操作'}
    );
  }
  function selected(item){
     console.log(item);
  }

 

</script>

<style lang="scss" scoped>
     $--color-primary: #409EFF;
  .container-wrapper {
    position: relative;
    margin-bottom: 5px;

    .container-action{
      position: absolute;
      //bottom: -30px;
      bottom: 0;
      right: -2px;
      height: 28px;
      line-height: 28px;
      background: $--color-primary;
      z-index: 999;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .drag-handler {
      position: absolute;
      top: -2px;
      //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
      left: -2px;
      height: 22px;
      line-height: 22px;
      background: $--color-primary;
      z-index: 9;

      i {
        font-size: 14px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: move;
      }
    }

  }

  .container-action, .drag-handler {
    :deep(.svg-icon) {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }
  }
</style>
